import React from 'react';
import {
    Sidebar, SidebarNav, SidebarNavItem,
    SidebarControls, SidebarControlBtn
} from 'global/jsx/sidebar_component';

import { Link } from 'react-router';
import LoremIpsum from 'global/jsx/loremipsum';

class ApplicationSidebar extends React.Component {
    render() {
        const sideBarDashboardEntity = <Entity entity='sideBarDashboard' />
        const sideBarSystemEntity = <span><Entity entity='sideBarSystem' /><BLabel className='bg-darkgreen45 fg-white'>1</BLabel></span>;
        const sideBarUserEntity = <Entity entity='sideBarUser' />;
        const sideBarRoleEntity = <Entity entity='sideBarRole' />;
        return (
            <div>
                <Grid>
                    <Row>
                        <Col xs={12}>
                            <div className='sidebar-header'><Entity entity='sideBarHeader' /></div>
                            <div className='sidebar-nav-container'>
                                <SidebarNav style={{marginBottom: 0}}>
                                    <SidebarNavItem glyph='icon-fontello-gauge' name={sideBarDashboardEntity} href='/dashboard'/>
                                    <SidebarNavItem glyph='icon-simple-line-icons-settings' name={sideBarSystemEntity} >
                                        <SidebarNav>
                                            <SidebarNavItem glyph='icon-fontello-user-1' name={sideBarUserEntity} href='/user' />
                                            <SidebarNavItem glyph='icon-fontello-shield' name={sideBarRoleEntity} href='/role' />
                                        </SidebarNav>
                                    </ SidebarNavItem>
                                </SidebarNav>
                            </div>
                        </Col>
                    </Row>
                </Grid>
            </div>
        );
    }
}

class DummySidebar extends React.Component {
    render() {
        return (
            <Grid>
                <Row>
                    <Col xs={12}>
                        <div className='sidebar-header'>DUMMY SIDEBAR</div>
                        <LoremIpsum query='1p'/>
                    </Col>
                </Row>
            </Grid>
        );
    }
}


export default class SideBar extends React.Component {
    render() {
        return (
            <div id='sidebar' {...this.props}>
                <div id='avatar'>
                    <Grid>
                        <Row className='fg-white'>
                            <Col xs={4} collapseRight>
                                <img src={ window.staticUrl + 'imgs/avatars/avatar0.png'} width='40' height='40'/>
                            </Col>
                            <Col xs={8} collapseLeft id='avatar-col'>
                                <div style={{top: 23, fontSize: 16, lineHeight: 1, position: 'relative'}}>Anna Sanchez
                                </div>
                                <div>
                                    <Progress id='demo-progress' value={30} min={0} max={100} color='#ffffff'/>
                                    <Link to='/app/lock' activeClassName="active"><Icon id='demo-icon' bundle='fontello' glyph='lock-5'/></Link>
                                </div>
                            </Col>
                        </Row>
                    </Grid>
                </div>
                <SidebarControls>
                    <SidebarControlBtn bundle='fontello' glyph='docs' sidebar={0}/>
                    <SidebarControlBtn bundle='fontello' glyph='chat-1' sidebar={1}/>
                    <SidebarControlBtn bundle='fontello' glyph='chart-pie-2' sidebar={2}/>
                    <SidebarControlBtn bundle='fontello' glyph='th-list-2' sidebar={3}/>
                    <SidebarControlBtn bundle='fontello' glyph='bell-5' sidebar={4}/>
                </SidebarControls>

                <div id='sidebar-container'>
                    <Sidebar sidebar={0} active>
                        <ApplicationSidebar />
                    </Sidebar>
                    <Sidebar sidebar={1}>
                        <DummySidebar />
                    </Sidebar>
                    <Sidebar sidebar={2}>
                        <DummySidebar />
                    </Sidebar>
                    <Sidebar sidebar={3}>
                        <DummySidebar />
                    </Sidebar>
                    <Sidebar sidebar={4}>
                        <DummySidebar />
                    </Sidebar>
                </div>
            </div>
        );
    }
}
